<template>
	<div class="bigBox">
		<van-pull-refresh v-model="loading" @refresh="onRefresh"></van-pull-refresh>
		<!-- :title="user.nickname" -->
<!--		<van-nav-bar class="nav-bar" left-text="返回" left-arrow @click-left="onClickLeft" />-->
		<div class="top" style="position: fixed">
			<div>
				<span>长沙
					<van-icon name="arrow-down" color="black" />
				</span><br>
				<span style="font-size: 10px">19.3℃</span>
			</div>
			<div style="width: 300px;">
				<van-search v-model="value" shape="round" placeholder="请输入搜索关键词" background="#ffd101"
					@search="onSearch">
					<template #action>
						<div @click="onClickButton">搜索</div>
					</template>
				</van-search>
			</div>
			<div>
				<van-icon name="add-o" class="jia" />
			</div>
		</div>
		<div class="middle">
			<div class="middle-top">

				<div v-for="picture in tu" :key="picture" class="middle-top-one">
					<div class="middle-top-two">
						<van-image fit="cover" :src="picture.url" />
						<span>{{ picture.character }}</span>
					</div>
				</div>
			</div>
			<div class="middle-zhong">
				<van-grid :border="false" :column-num="5">
					<van-grid-item v-for="itme in middle_tu" :key="itme">
						<router-link to="/waiMaiIndex">
							<van-image :src="itme.url" />
						</router-link>
					</van-grid-item>
				</van-grid>
			</div>
			<div class="middle-bottom">
				<van-tabs v-model:active="active" animated sticky offset-top="80px">
					<van-tab title="猜你喜欢">
						<div class="xihaung">
							<van-card class="hezi" v-for="(item,index) in shop" :key="index" :desc="'评分：'+item.grade+' | 销量：'+item.salesVolume"
								:title="item.shopName" :thumb="item.headPortrait" 
								@click="toShopDishesList(item.id)">
								<template #tags style="margin-bottom: 0px">
									
									<van-tag plain type="danger">满20-5</van-tag>
								</template>
							</van-card>
						</div>
					</van-tab>
					<van-tab title="今日特价">内容 2</van-tab>
					<van-tab title="发现好店">内容 3</van-tab>
				</van-tabs>
			</div>
		</div>
	</div>
</template>
<script>
	import {
		ref
	} from 'vue';
	// import storage from '../utils/localstorage.js'
	export default {
		
		setup() {
			const active = ref(0);
			return {
				active
			};
		},
		mounted() {
			//调用接口让过滤器拦截页面
				this.$axios.get('/dishes/test')
					.then(res => {
						console.log(res);
					})
			this.getShop();
			
		},
		methods: {
			getShop() {
				this.$axios.get('/shop/fieryShop')
					.then(res => {
						if( res.result != null ){
							this.shop = res.result.list
						}
					})
			},
			toShopDishesList(shopId) {
				// 
				this.$router.push({
					path: '/shopDishesList',
					query: {
						'shopId': shopId
					}
				})
			},
			onClickLeft() {
				history.back()
			},
		},
		data() {
			return {
				middle_tu: [{
						url: require("../assets/wm.png")
					},
					{
						url: require("../assets/ms.png")
					},
					{
						url: require("../assets/jd.png")
					},
					{
						url: require("../assets/xx.png")
					},
					{
						url: require("../assets/dy.png")
					},
					{
						url: require("../assets/sc.png")
					},
					{
						url: require("../assets/xh.png")
					},
					{
						url: require("../assets/cs.png")
					},
					{
						url: require("../assets/my.png")
					},
					{
						url: require("../assets/cw.png")
					},
					{
						url: require("../assets/yx.png")
					},
					{
						url: require("../assets/sg.png")
					},
					{
						url: require("../assets/xj.png")
					},
					{
						url: require("../assets/lf.png")
					},
					{
						url: require("../assets/pt.png")
					},
				],
				tu: [{
						character: "扫一扫",
						url: require("../assets/RichScan.png")
					},
					{
						character: "骑车",
						url: require("../assets/cycle.png")
					},
					{
						character: "打车",
						url: require("../assets/taxi.png")
					},
					{
						character: "火车票机票",
						url: require("../assets/ticket.png")
					},
				],
				shop: [],
				checked: true,
			}

		},
	}
</script>
<style scoped>
	.top {
		width: 100%;
		height: 80px;
		background-color: #ffd101;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: flex-end;
		z-index: 3;
	}

	.jia {
		margin-bottom: 18px;
	}

	.middle-top {
		margin-top: 80px;
		background-color: #ffd101;
		height: 90px;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
	}

	.middle-zhong {
		height: 310px;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: flex-end;
	}

	.middle-bottom {
		z-index: 1000;
	}

	.child {
		width: 40px;
		height: 40px;
		background: #f2f3f5;
		border-radius: 4px;
	}

	.middle {
		margin-bottom: 60px;
	}

	.middle-top-one {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		margin: 20px 0px 0px 0px;
	}

	.middle-top-two {
		display: flex;
		flex-direction: column;
		text-align: center;
	}

	.van-card__header {
		flex-direction: column;
		align-items: center;
	}

	.hezi {
		width: 350px;
		height: 120px;
		padding-top: 15px;
		border-bottom: 1px solid gray;
	}

	.van-card__thumb {
		width: 180px;
		height: 150px;
	}

	.xihaung {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: center;
		flex-wrap: wrap;
		margin-top: 10px;
	}

	.van-card:not(:first-child) {
		margin: 0;
	}

	.van-image__img {
		margin-left: 4px;
		margin-top: 0px;
	}

	.van-tab__text--ellipsis {
		font-size: 18px;
		font-weight: bold;
	}

	.van-card__title {
		font-size: 16px;
		font-weight: bold;
	}

	.van-card__desc {
		font-size: 12px;
		color: #999999;
	}

	.hezi {
	}
</style>